<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>朋知云学 - 让支教更简单</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/hero.css">
    <link rel="stylesheet" href="css/particles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
</head>
<body>
    <!-- 导航栏 -->
    <header class="navbar">
        <div class="container">
            <div class="logo">
                <img src="../static/avatar1.png" alt="朋知云学">
                <span>朋知云学</span>
            </div>
            <nav class="nav-menu">
                <ul>
                    <li><a href="index.html" class="active">首页</a></li>
                    <li><a href="demands.html">支教需求</a></li>
                    <li><a href="ai-assistant.html">AI助手</a></li>
                    <li><a href="user-center.html">用户中心</a></li>
                </ul>
            </nav>
            <div class="user-actions">
                <a href="login.html" class="btn btn-login">登录</a>
                <a href="register.html" class="btn btn-register">注册</a>
            </div>
        </div>
    </header>

    <!-- 主横幅 - 美化版 -->
    <section class="hero">
        <div class="hero-particles" id="particles-js"></div>
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title"><span class="highlight">让支教更简单</span></h1>
                <p class="hero-subtitle">连接有需要的学校和志愿者，共同创造教育的未来</p>
                <div class="hero-buttons">
                    <a href="demands.html" class="btn btn-primary btn-hero"><i class="bi bi-search"></i> 浏览支教需求</a>
                    <a href="post-demand.html" class="btn btn-secondary btn-hero"><i class="bi bi-pencil-square"></i> 发布支教需求</a>
                </div>
                <div class="hero-stats">
                    <div class="stat-item">
                        <div class="stat-number">200+</div>
                        <div class="stat-label">支教学校</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">500+</div>
                        <div class="stat-label">志愿者</div>
                    </div>
                    <div class="stat-item">
                        <div class="stat-number">50+</div>
                        <div class="stat-label">合作机构</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 功能介绍 -->
    <section class="features">
        <div class="container">
            <h2 class="section-title">平台功能</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-search"></i>
                    </div>
                    <h3>浏览支教需求</h3>
                    <p>在首页可以浏览所有支教需求，包括紧急需求、长期招募、学科教学等不同类别。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-pencil-square"></i>
                    </div>
                    <h3>发布支教需求</h3>
                    <p>填写支教需求的详细信息，包括学校名称、地点、需求科目、人数等信息后提交。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-people"></i>
                    </div>
                    <h3>申请加入支教团队</h3>
                    <p>在需求详情页面，点击"申请组队"按钮，填写您的联系方式和申请说明后提交申请。</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="bi bi-robot"></i>
                    </div>
                    <h3>AI小助手</h3>
                    <p>获取个性化的支教推荐、适合的队伍分析和个性化建议，帮助您更好地参与支教活动。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 紧急需求 -->
    <section class="urgent-demands">
        <div class="container">
            <h2 class="section-title">紧急支教需求</h2>
            <div class="demands-grid">
                <!-- 需求卡片示例 -->
                <div class="demand-card">
                    <div class="demand-tag urgent">紧急</div>
                    <h3>山区小学语文教师支教</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 云南省丽江市</p>
                        <p><i class="bi bi-calendar3"></i> 2023-10-01 至 2023-12-31</p>
                        <p><i class="bi bi-book"></i> 语文、数学</p>
                    </div>
                    <a href="demand-detail.html?id=1" class="btn btn-outline">查看详情</a>
                </div>
                <!-- 更多需求卡片 -->
                <div class="demand-card">
                    <div class="demand-tag urgent">紧急</div>
                    <h3>乡村初中英语教师招募</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 贵州省黔东南州</p>
                        <p><i class="bi bi-calendar3"></i> 2023-09-15 至 2024-01-15</p>
                        <p><i class="bi bi-book"></i> 英语</p>
                    </div>
                    <a href="demand-detail.html?id=2" class="btn btn-outline">查看详情</a>
                </div>
                <div class="demand-card">
                    <div class="demand-tag urgent">紧急</div>
                    <h3>留守儿童课后辅导</h3>
                    <div class="demand-info">
                        <p><i class="bi bi-geo-alt"></i> 四川省凉山州</p>
                        <p><i class="bi bi-calendar3"></i> 2023-10-10 至 2023-12-20</p>
                        <p><i class="bi bi-book"></i> 综合课程</p>
                    </div>
                    <a href="demand-detail.html?id=3" class="btn btn-outline">查看详情</a>
                </div>
            </div>
            <div class="view-more">
                <a href="demands.html" class="btn btn-secondary">查看更多需求</a>
            </div>
        </div>
    </section>

    <!-- 使用教程 -->
    <section class="tutorial">
        <div class="container">
            <h2 class="section-title">使用教程</h2>
            <div class="tutorial-steps">
                <div class="tutorial-step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>注册账号</h3>
                        <p>点击右上角的"注册"按钮，填写基本信息完成账号注册。</p>
                    </div>
                </div>
                <div class="tutorial-step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>浏览需求</h3>
                        <p>在首页或"支教需求"页面浏览各类支教需求，可以按地区、学科等筛选。</p>
                    </div>
                </div>
                <div class="tutorial-step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>申请组队</h3>
                        <p>找到合适的支教需求后，点击"申请组队"按钮提交申请。</p>
                    </div>
                </div>
                <div class="tutorial-step">
                    <div class="step-number">4</div>
                    <div class="step-content">
                        <h3>发布需求</h3>
                        <p>如果您是学校或机构，可以点击"发布支教需求"按钮创建新的需求。</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="../static/avatar1.png" alt="朋知云学">
                    <p>朋知云学 - 让支教更简单</p>
                </div>
                <div class="footer-links">
                    <div class="link-group">
                        <h4>关于我们</h4>
                        <ul>
                            <li><a href="about.html">平台介绍</a></li>
                            <li><a href="rules.html">用户守则</a></li>
                            <li><a href="contact.html">联系我们</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>帮助中心</h4>
                        <ul>
                            <li><a href="tutorial.html">使用教程</a></li>
                            <li><a href="faq.html">常见问题</a></li>
                            <li><a href="feedback.html">意见反馈</a></li>
                        </ul>
                    </div>
                    <div class="link-group">
                        <h4>法律信息</h4>
                        <ul>
                            <li><a href="agreement.html">用户协议</a></li>
                            <li><a href="privacy.html">隐私政策</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 朋知云学. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
    <script src="js/index.js"></script>
    <script src="js/hero-particles.js"></script>
</body>
</html>